<template>
  <div>
    <el-form @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.res_a_name"
          placeholder="负责人查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="datePicked"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="缴费开始日期"
          end-placeholder="缴费结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumArrivalStatus"
          v-model="arrivalStatusSelected"
          @change="handleArrivalStatusChange"
          clearable
          placeholder="到账状态"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :stripe="false" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <el-tooltip effect="light" :content="scope.row.address">
          <div class="text-truncate">{{ scope.row.address }}</div>
        </el-tooltip>
      </template>

      <template v-slot:payStatus="scope">
        <div :class="['text-wrapper', `text-${scope.row.payStatusStyle}`]">
          {{ scope.row.payStatusLabel }}
        </div>
      </template>

      <template v-slot:payQxStatus="scope">
        <div :class="['text-wrapper', `text-${scope.row.payQxStatusStyle}`]">
          {{ scope.row.payQxStatusLabel }}
        </div>
      </template>

      <template v-slot:arrivalStatus="scope">
        <div :class="['text-wrapper', `text-${scope.row.arrivalStatusStyle}`]">
          {{ scope.row.arrivalStatusLabel }}
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <union-edit-city-dialog
      :visible.sync="editCityVisible"
      :edit-row="editRow"
      :view-mode="editViewMode"
      @success="getData(params.index)"
    ></union-edit-city-dialog>

    <union-edit-county-dialog
      :visible.sync="editCountyVisible"
      :edit-row="editRow"
      :view-mode="editViewMode"
      @success="getData(params.index)"
    ></union-edit-county-dialog>
  </div>
</template>

<script>
import { lastPickerShortcuts, nextPickerShortcuts } from '@/common/plugins/tools/date'

import settleMixins from '@/credit/views/city/settle/settleMixins'

import SelectAddress from '@/components/select/SelectAddress'
import UnionEditCityDialog from '@/credit/views/city/settle/UnionEditCityDialog'
import UnionEditCountyDialog from '@/credit/views/city/settle/UnionEditCountyDialog'

export const enumArrivalStatus = {
  1: '待查实',
  2: '已到账',
}

export default {
  components: {
    SelectAddress,
    UnionEditCityDialog,
    UnionEditCountyDialog,
  },
  mixins: [settleMixins],
  data() {
    return {
      enumArrivalStatus,
      params: {
        index: 1,
        size: 15,
        customer_name: '',
        res_a_name: '',
        address_code: '',
        'gua_type.eq': '1',
        'service_id.eq': '',
        'pay_status.gte': 1,
      },
      order: {
        N1pay_qx_status: 'asc',
        N2actual_warrant_date: 'desc',
      },

      arrivalStatusSelected: '',
      datePicked: [],

      tableName: 'credit_warrant_fee_record_view_join_db',

      pickerOptions: {
        shortcuts: [...lastPickerShortcuts, ...nextPickerShortcuts],
      },

      // 编辑
      editRow: {},
      editCityVisible: false,
      editViewMode: false,
      editCountyVisible: false,
    }
  },
  computed: {
    tableColumns() {
      return [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: '120px' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        { attrs: { label: '担保费率(%)', prop: 'gua_rate', align: 'center' } },
        { attrs: { label: '已收金额(元)', prop: 'due_warrant_fee', align: 'center' } },
        { attrs: { label: '保费比例', prop: 'unionRate', align: 'center' } },
        {
          attrs: {
            label: `应${this.isUserCity ? '付' : '收'}金额(元)`,
            prop: 'unionPayFunds',
            align: 'center',
          },
        },
        { attrs: { label: '支付单位', prop: 'serviceName', align: 'center', minWidth: 150 } },
        {
          attrs: { label: '缴费状态', prop: 'payStatusLabel', align: 'center', minWidth: 90 },
          slot: 'payStatus',
        },
        {
          attrs: { label: '支付状态', prop: 'payQxStatusLabel', align: 'center', minWidth: 90 },
          slot: 'payQxStatus',
        },
        {
          attrs: { label: '到账状态', prop: 'arrivalStatusLabel', align: 'center', minWidth: 90 },
          slot: 'arrivalStatus',
        },
        {
          attrs: { label: '操作', align: 'center', minWidth: 100 },
          operations: [
            {
              content: '支付确认',
              icon: 'fa fa-gavel',
              event: this.handleEditCity,
              ifRender: r => this.isUserAccount && this.isUserCity && r.payQxStatus === 0,
            },
            {
              content: '到账登记',
              icon: 'fa fa-gavel',
              event: this.handleEditCounty,
              ifRender: r => this.isUserAccount && !this.isUserCity && r.payQxStatus === 1,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.hanleView,
            },
          ],
        },
      ]
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataAdapter(row) {
      row.serviceName = this.isUserCity ? row.service_name : row.recommend_service_name

      const { unionRate, guaFunds, unionPayFunds } = this.getRateAndFunds(row)
      row.unionRate = unionRate
      row.guaFunds = guaFunds
      row.unionPayFunds = unionPayFunds

      row.payStatus = +row.pay_status
      row.payStatusLabel = `已缴费\r\n${this.$utils.dateFormat(
        row.actual_warrant_date,
        'yyyy-MM-dd'
      )}`
      row.payStatusStyle = 'success'
      row.payStatusReal = 0

      row.payQxStatus = +row.pay_qx_status || 0
      const { label: cityPayLabel, css: cityPayCss } = this.getPayQxStatus(row)
      row.payQxStatusLabel = cityPayLabel
      row.payQxStatusStyle = cityPayCss

      const { label: arrivalLabel, css: arrivalCss } = this.getQxArrivalStatus(row)
      row.arrivalStatusLabel = arrivalLabel
      row.arrivalStatusStyle = arrivalCss

      return row
    },
    handleEditCity(row = {}) {
      this.editViewMode = false
      this.editRow = row
      this.editCityVisible = true
    },
    handleEditCounty(row = {}) {
      this.editViewMode = false
      this.editRow = row
      this.editCountyVisible = true
    },
    hanleView(row = {}) {
      this.editViewMode = true
      this.editRow = row
      this.editCityVisible = true
    },
    handleArrivalStatusChange() {
      this.params.index = 1
      this.resetParams()
      if (!this.arrivalStatusSelected) {
        return this.getData()
      }

      const status = +this.arrivalStatusSelected
      switch (status) {
        case 1:
          // 待查实
          this.params['pay_qx_status.lte'] = '1'
          break
        case 2:
          // 已到账
          this.params['pay_qx_status.eq'] = '2'
          break
        default:
          break
      }

      this.getData()
    },
    handleDateChange() {
      // this.arrivalStatusSelected = ''
      this.params.index = 1
      this.resetParams()
      if (this.datePicked && this.datePicked.length === 2) {
        this.params['actual_warrant_date.gte'] = this.datePicked[0]
        this.params['actual_warrant_date.lte'] = `${this.datePicked[1]} 23:59:59`
      }

      this.getData()
    },
    resetParams() {
      this.params['pay_qx_status.eq'] = ''
      this.params['pay_qx_status.lte'] = ''
      this.params['actual_warrant_date.gt'] = ''
      this.params['actual_warrant_date.gte'] = ''
      this.params['actual_warrant_date.lte'] = ''
      this.params['actual_warrant_date.lt'] = ''
    },
    getPayQxStatus(row) {
      return row.payQxStatus === 0
        ? { label: '待查实', css: 'warning' }
        : {
            label: `已支付\r\n${this.$utils.dateFormat(row.pay_qx_date, 'yyyy-MM-dd')}`,
            css: 'success',
          }
    },
    getQxArrivalStatus(row) {
      return row.payQxStatus < 2
        ? { label: '待查实', css: 'warning' }
        : {
            label: `已到账\r\n${this.$utils.dateFormat(row.pay_qx_check_date, 'yyyy-MM-dd')}`,
            css: 'success',
          }
    },
    getRateAndFunds(row) {
      const unionRate = +row.gua_fee_rate || 0
      const guaRate = +row.gua_rate || 0
      const leftFunds = +row.left_funds || 0

      const guaFunds = guaRate ? Math.round(guaRate * leftFunds * 1e4) / 1e2 : '-'
      const unionPayFunds =
        unionRate && guaRate ? Math.round(unionRate * guaFunds * 1e2) / 1e4 : '-'

      return {
        unionRate: unionRate ? `${Math.round((100 - unionRate) * 1e2) / 1e2}:${unionRate}` : '-',
        guaFunds,
        unionPayFunds,
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
